<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Unicorn Admin</title>
		<meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/bootstrap-min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/unicorn.main.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/dist/css/unicorn.grey.css" class="skin-color" />	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
	<body>				
		<div id="header">
			<h1><a href="./dashboard.html">独角兽管理员</a></h1>		
		</div>
				
		<div id="user-nav" class="navbar navbar-inverse">
            <ul class="nav btn-group">
              
                    <!-- 默认头像 -->				
					<li><img src="${pageContext.request.contextPath}/dist/img/0.jpg"
					     style="border-radius:50%;width:30px;height:30px;margin-top:0px;"/></li>
					<%-- </c:if>
					<!-- 自定义头像 -->
					<c:if test="${sessionScope.users.adminImg != null} }">
					<li><img src="${pageContext.request.contextPath}/DownloadFileServlet?fileName=${sessionScope.users.adminImg}"
					     style="border-radius:50%;width:30px;height:30px;margin-top:0px;"/></li>
					</c:if> --%>
                <li><a href="#">${sessionScope.users.adminAccount }</a></li>
                <li class="btn btn-inverse"><a title="" href="${pageContext.request.contextPath}/EduControllerByGyx?op=addminExit"><i class="icon icon-share-alt"></i> <span class="text">退出</span></a></li>
            </ul>
        </div>
            
		<div id="sidebar">
			<a href="#" class="visible-phone"><i class="icon icon-home"></i> 首页</a>
			<ul>
				<li class="active"><a href="${pageContext.request.contextPath}/mvc/index.jsp"><i class="icon icon-home"></i> <span>首页</span></a></li>
				<li class="submenu">
					<a href="#"><i class="icon icon-th-list"></i> <span>管理员事项</span> <span class="label">2</span></a>
					<ul>
						<li><a href="${pageContext.request.contextPath}/mvc/form-validation.jsp">管理员列表</a></li>
						<li><a href="${pageContext.request.contextPath}/mvc/form-addadmin.jsp">添加管理员</a></li>
					</ul>
				</li>
				<li class="submenu">
					<a href="#"><i class="icon icon-th-list"></i> <span>详细数据表</span> <span class="label">2</span></a>
					<ul>
						<li><a href="${pageContext.request.contextPath}/mvc/userstable.jsp">用户列表</a></li>
						<li><a href="${pageContext.request.contextPath}/mvc/articletable.jsp">文章列表</a></li>
					</ul>
				</li>
				<li>
					<a href="${pageContext.request.contextPath}/mvc/charts.jsp"><i class="icon icon-signal"></i> <span>数据信息统计</span></a>
				</li>		
			</ul>
		
		</div>
		
		<div id="style-switcher">
			<i class="icon-arrow-left icon-white"></i>
			<span>Style:</span>
			<a href="#grey" style="background-color: #555555;border-color: #aaaaaa;"></a>
			<a href="#blue" style="background-color: #2D2F57;"></a>
			<a href="#red" style="background-color: #673232;"></a>
		</div>
		
		<div id="content">
			<div id="content-header">
				<h1>EduSystem系统</h1>
				
			</div>
			<div id="breadcrumb">
				<a href="index.jsp" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> 主页面</a>
				<a href="#" class="current">数据汇总&amp; 数据统计</a>
			</div>
			<div class="container-fluid">
				<div class="row-fluid">
					<div class="span12">
						<div class="widget-box widget-plain">
							<div class="widget-content center">
								<ul class="stats-plain">
									<li>										
										<h4 id="allAtircles"></h4>
										<span>总投稿数</span>
									</li>
									<li>										
										<h4 id="newAtircles"></h4>
										<span>新增投稿数</span>
									</li>
									<li>										
										<h4 id="allUsers"></h4>
										<span>总活跃用户</span>
									</li>
									<li>										
										<h4 id="newUser"></h4>
										<span>新增活跃用户</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- 图标echarts -->
			<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
			<br />
			<div class="span12" >
				<ul id="echartsDiv">
				<li>
					<div id="mainecharts" style="width: 450px; height: 400px;"></div>
					<select id="articleTypes">
					<option value="全部">全部</option></select>
				</li>
				<li class="childLi">
					<div id="usercharts" style="width: 450px; height: 400px;"></div>
				</li>
				<li class="childLi">
					<div id="typecharts" style="width: 450px; height: 400px;"></div>
				</li>
				</ul>
			</div>
			<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
				<div class="row-fluid">
					<div id="footer" class="span12">
						2012 &copy;  by <a href="https://wrapbootstrap.com/user/diablo9983">diablo9983</a>
					</div>
				</div>
			</div>
		</div>
		
		    <!-- 引入 echarts.js -->
           <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/excanvas.min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/jquery.ui.custom.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/bootstrap-min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/jquery.flot.min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/jquery.flot.pie.min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/jquery.flot.resize.min.js"></script>
            <script src="${pageContext.request.contextPath}/dist/js/unicorn.js"></script>
            <%-- <script src="${pageContext.request.contextPath}/dist/js/unicorn.charts.js"></script> --%>
             
	</body>
	<script type="text/javascript">
	//7日总文章数
	 var articlecount=new Array();
	//7日用户数
	 var usercount=new Array();
	//7日天数
	 var days=new Array();
	//类型名
	var typenames=new Array();
	//类型对应的文章数
	var typescount=new Array();
	 
	 //设置7天时间
	 for(var k=7;k>0;k--){
			var time=(new Date).getTime()-24*60*60*1000*k;
         var yesterday=new Date(time);
         var month=yesterday.getMonth();
         var day=yesterday.getDate();
         yesterday=(yesterday.getMonth()> 9 ? (yesterday.getMonth() + 1) : "0" + (yesterday.getMonth() + 1)) + "-" +(yesterday.getDate()> 9 ? (yesterday.getDate()) : "0" + (yesterday.getDate()));
         days.push(yesterday);
         console.log("第"+k+"次遍历days:"+days[k]);
			}
	   $(function(){
		   //用户7日新增
		   $.post("${pageContext.request.contextPath}/EduControllerByLu",{op:"getnewUserCount"},function(result){ 
				  for(var i=0;i<result.length;i++){
					  console.log("第"+i+"次遍历:"+result[i]);
					  usercount.push(result[i]);
					  console.log("第"+i+"次遍历count:"+usercount[i]);
				  }
                 
				  // 基于准备好的dom，初始化echarts实例
			        var myChart = echarts.init(document.getElementById('usercharts'));
			        // 指定图表的配置项和数据
			        var option = {
			            title: {
			                text: '近7日用户新增'
			            },
			            tooltip: {},
			            legend: {
			                data:['用户新增']
			            },
			            xAxis: {
			                /* data: ["7","C6+","C5","4","。3。","2..","。1。"] */
			                data: days
			            },
			            yAxis: {},
			            series: [{
			                name: '用户新增',
			                type: 'line',
			                /* data: [5, 20, 36, 10, 10, 20]  */
			                data:usercount
			            }]
			        };
			        // 使用刚指定的配置项和数据显示图表。
			        myChart.setOption(option);
				  
	        },"json")
	        
	        //获取总人数总文章数
	        $.post("${pageContext.request.contextPath}/EduControllerByLu",{op:"queryCount"},function(result){
				 $("#allUsers").text(result.allUsers);
				 $("#newUser").text(result.newUsers);
				 $("#allAtircles").text(result.allArticles);
				 $("#newAtircles").text(result.newArticles);
			 },"json"); 
		   
		   //文章近7日新增
		    $.post("${pageContext.request.contextPath}/EduControllerByLu",{op:"getnewCount"},function(result){ 
				  for(var i=0;i<result.length;i++){
					  console.log("第"+i+"次遍历:"+result[i]);
					  articlecount.push(result[i]);
					  console.log("第"+i+"次遍历count:"+articlecount[i]);
				  }
                 
				  // 基于准备好的dom，初始化echarts实例
			        var myChart = echarts.init(document.getElementById('mainecharts'));
			        // 指定图表的配置项和数据
			        var option = {
			            title: {
			                text: '近7日文章新增'
			            },
			            tooltip: {},
			            legend: {
			                data:['文章新增']
			            },
			            xAxis: {
			                /* data: ["7","C6+","C5","4","。3。","2..","。1。"] */
			                data: days
			            },
			            yAxis: {},
			            series: [{
			                name: '文章新增',
			                type: 'line',
			                /* data: [5, 20, 36, 10, 10, 20]  */
			                data:articlecount 
			            }]
			        };
			        // 使用刚指定的配置项和数据显示图表。
			        myChart.setOption(option);
				  
	        },"json")
		  
	        //获取类型
	        $.post("${pageContext.request.contextPath}/EduControllerByLu",{op:"getTypeName"},function(result){
	        	$("#articleTypes").length=1;
	        	$.each(result,function(n,name){
	        		$("#articleTypes").append("<option value='"+name+"'>"+name+"</option>");
	        		typenames.push(name);
	        	})
	        },"json");
		   
		  //类型文章的圆饼图
		     $.post("${pageContext.request.contextPath}/EduControllerByLu",{op:"gettypeCount"},function(result){ 
				  for(var i=0;i<result.length;i++){
					  typescount.push(result[i]);
				  }
				  // 基于准备好的dom，初始化echarts实例
			        var myChart = echarts.init(document.getElementById('typecharts'));
			        // 指定图表的配置项和数据
			        var option = {
			            title: {
			                text: '各类型文章占比'
			            },
			            tooltip: {},
			            legend: {
			                data:['类型占比']
			            },
			            xAxis: {
			                data: typenames
			            },
			            yAxis: {},
			            series: [{
			                name: '类型占比',
			                type: 'bar',
			                data:typescount
			            }]
			        };
			        // 使用刚指定的配置项和数据显示图表。
			        myChart.setOption(option);
				  
	        },"json")
	   })
	   
	   
	   
	</script>
	<style>
	#echartsDiv li{
	float:left;
	list-style:none;
	}
	
	#echartsDiv .childLi{
	border-left:1px dashed #CDCDCD
	}
	</style>
</html>
